<script setup lang="ts">
import { mainStore } from "./../store/index"; // 导入
import { storeToRefs } from "pinia";

const store = mainStore(); // 创建对象

let { count, sumPrice } = storeToRefs(store);  // 将对象解构，并且设置为响应式
</script>

<template>
  <div>
    <h2>另外一个组件中用于观察 store 值的变化</h2>
  </div>
  <div class="card">
    <!--  界面展示 -->
    <p>读取 mainStore 中的值: {{ store.count }}</p>

    <!-- 响应式解构读取 -->
    <p>读取 mainStore 中的值: {{ count }}</p>

    <!-- 读取 mainStore 中的 getters -->
    <p>读取 mainStore 中的 getters : {{ store.sumPrice }} </p>
    <p>读取 mainStore 中的 getters : {{ sumPrice }}</p>

    <div>
      <p>明细中的值为：</p>
      <ul>
        <li v-for="list of store.list">
          {{ list.id }} -- {{ list.name }} -- {{ list.price }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
